<script>
import baseForm from '@admin/packages/table-operate/src/baseForm.vue';
import main from './mixins/main';
import table from './mixins/table';
import filter from './mixins/filter';
import banner from './mixins/banner';

export default {
  name: 'Tem1101',
  extends: baseForm,
  mixins: [main, filter, table, banner],
  data() {
    return {
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    onActivated() {
      this.getList();
    }
  }
};
</script>

<template>
  <div>
    <page-banner v-if="showBanner && bannerPosition === 'top'" ref="pageBanner" :banner-setting="bannerSetting" />
    <TableFilter
      ref="tableFilter"
      v-model:search-type="searchType"
      v-model:search-text="searchText"
      is-in-template
      :query="filter"
      :query-rows="queryRows"
      :enable-full-search="fullTextSearch"
      :grid-info="gridInfo"
      @search="handleSearch"
      @reset="handleSearch"
    />
    <div class="filter-wraper">
      <TableOperate is-in-template :btns="toolbarBtns" :show-back="showBack">
        <template v-if="showBack" #back="{ size }">
          <span class="btn-wraper">
            <ElButton type="primary" :size="size" @click="goBack">
              <ElIcon><Back /></ElIcon>
              返回
            </ElButton>
          </span>
        </template>
      </TableOperate>
    </div>
    <SlotRender name="tabs" />
    <LbTable
      ref="lbTable"
      v-bind="tableAttr"
      v-model:current-page="currentPage"
      v-loading="listLoading"
      :column="tableColumn"
      :data="tableData"
      :table-info="tableInfo"
      :grid-info="gridInfo"
      :personalization="personalization"
      :btns="tableBtns"
      :pagination="enablePaging"
      background
      border
      is-template
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="pageSizes"
      :total="total"
      :page-size="pageSize"
      fixed-heigth
      :default-sort="defaultSort"
      @size-change="handleSizeChange"
      @p-current-change="handleCurrentChange"
      @sort-change="handleSortChange"
    />
    <page-banner v-if="showBanner && bannerPosition === 'bottom'" ref="pageBanner" :banner-setting="bannerSetting" />
  </div>
</template>

<style lang="scss" scoped>
::v-deep .form-operate {
  display: inline-block;
  margin-right: 10px;
}

.demo-table-section {
  margin: 20px 0;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  h3 {
    margin-bottom: 20px;
    color: #303133;
    font-size: 18px;
    font-weight: 600;
  }

  .pagination-container {
    margin-top: 20px;
    text-align: right;
  }
}
</style>
